<template>
  <div>
    <!-- 
        model	表单数据对象	object
        rules	表单验证规则	object
     -->
    <el-form
      :model="loginInfo"
      :rules="rules"
      ref="loginRef"
      label-width="100px"
    >
      <el-form-item prop="username" label="用户名">
        <el-input v-model="loginInfo.username"></el-input>
      </el-form-item>
      <el-form-item prop="password" label="密码">
        <el-input v-model="loginInfo.password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="login" type="primary">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // user:'',
      // pass:''
      //表单数据
      loginInfo: {
        username: "",
        password: "",
      },
      //表单规则验证对象
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 2, max: 6, message: "长度在 2 到 6个字符", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 6, max: 16, message: "长度在 6 到 16个字符", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    //封装一个登录事件
    login() {
      console.log(this.loginInfo, "准备登录");
      // axios.post({
      //     username:this.user,
      //     password:this.pass
      // })
      // .then(res=>res)
      // axios.post(this.loginInfo)
      // .then(res=>res)
      //在登录事件中添加规则验证方法
      this.$refs.loginRef.validate((val) => {
        // console.log(val,'vvvvvv')
        if (val) {
          //跳转首页
          this.$router.push("/index");
        }
      });
    },
  },
};
</script>

<style scoped></style>
